<template>
  <div class="container-fluid p-5">
    <vuedraggable v-if="isarr" class="row" group="name" v-model="getarr">
      <div v-for="(v, i) in getarr" :key="i" class="col p-1 border">
        {{ index }}
      </div>
    </vuedraggable>
    <div class="border p-5" v-else>
      <vuedraggable class="row" group="name" v-model="crr">
        <div v-for="(v, i) in crr" :key="i" class="row p-1 border">
          {{ index }}
        </div>
      </vuedraggable>
      {{ getarr }}
    </div>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
import uarr from "./utilarr";

export default {
  components: {
    vuedraggable,
  },
  data() {
    return {
      crr: [],
    };
  },
  name: "Hello",
  props: ["arr", "index", "setarr"],
  methods: {
    _setarr(key, brr) {
      if (typeof brr === "string") {
        brr = ["", ""];
      }
      const arr = JSON.parse(JSON.stringify(this.arr));
      arr[key] = brr;
      this.setarr(this.index, arr);
    },
  },
  computed: {
    classname() {
      return 666;
    },
    isarr() {
      const t = Array.isArray(this.arr);
      return t;
    },
    getarr: {
      get() {
        return this.arr;
      },
      set(brr) {
        let index = brr.findIndex((v, k) => {
          if (typeof v === "object") {
            const _v = JSON.stringify(v);
            const _brr = JSON.stringify(this.arr[k]);
            return _v !== _brr;
          }
        });
        if (index === -1) index = 0;
        if (index === this.arr.length) index = this.arr.length - 1;
        const arr = uarr(brr, this.arr, index, "word");
        this.setarr(this.index, arr);
      },
    },
  },
};
</script>
